import React from 'react';
import styled from 'styled-components';
import Typist from 'react-typist';
import { CallButton } from './CallButton';
import img from '../images/hero-image.jpg';

const deviceHeight = window.innerHeight;

const HeroFilter = styled.div`
  background-color: rgba(18,18,18,0.6);
  flex-direction: column;
  padding: 2rem 0;
  display: flex;
  height: ${deviceHeight-50}px;
`;

const HeroContainer = styled.div`
  background-image: url(${img});
  background-attachment:fixed;
  background-size: 100%;
  background-position: center;
  justify-content: center;
  height: auto;
`;

const TitleDiv = styled.div`
  margin: auto 0;
`;

const MainTitle = styled.h1`
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-weight: bold;
  font-size: 48px;
  color: #c4c4c4;
  margin: auto 0 2rem 0;
`;

const TyperDiv = styled.div`
  font-weight: bold;
  font-family: 'Source Code Pro', sans-serif;
  text-align: center;
  font-size: 36px;
  color: #3EC211;
  margin: 0 auto;
`;

const alertei = () => {
  alert("Alertado!");
}

export const Hero = () => {
  return (
    <HeroContainer>
      <HeroFilter>
        <TitleDiv>
         <MainTitle>[-DARKWAVES CONFERENCE II-]</MainTitle>
          <TyperDiv>
            <Typist>
              <strong>SEBRAE</strong> - NATAL/RN
              <br/>
              <Typist.Delay ms={300} />
              25/05/2019 - 13:00hs às 17:00
            </Typist>
          </TyperDiv>
        </TitleDiv>
        <CallButton label="1NSCR3V4-5E" onClick={ alertei } center/>
      </HeroFilter>
    </HeroContainer>
  );
}
